<template>
  <div class="container">
    <!-- 头部用户信息 -->
    <van-row>
      <van-col span="16" offset="1" class="title">
        <div class="name">
          <span>{{ userName }}</span>
        </div>
        <div class="name">
          <span>{{ userPhone }}</span>
        </div>
        <div class="word"><span>亲，来一单吧，别饿着啦~</span></div>
      </van-col>
      <van-col span="7"
        ><van-image
          round
          width="80px"
          height="80px"
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591186597551&di=0a92bbe14ae590932b4ba4ffbf65cd67&imgtype=0&src=http%3A%2F%2Fuserimg.yingyonghui.com%2Fhead%2F26%2F1448786428737%2F3172626.png-thumb"
      /></van-col>
    </van-row>
    <van-divider />
    <!-- 下方功能区 -->
    <van-cell
      is-link
      icon="https://s1.ax1x.com/2020/05/09/Yl9DG6.png"
      title="收货地址"
      size="large"
      title-style="margin-left: 10px"
      @click="toAddressList"
    />
    <van-cell
      is-link
      icon="https://s1.ax1x.com/2020/05/09/Yl9fII.png"
      title="我的收藏"
      size="large"
      title-style="margin-left: 10px"
      @click="toClollect"
    />
    <van-cell
      is-link
      icon="https://s1.ax1x.com/2020/05/09/Yl9IRf.png"
      title="推荐有礼"
      size="large"
      title-style="margin-left: 10px"
      @click="toClollect"
    />
    <van-cell
      is-link
      icon="https://s1.ax1x.com/2020/05/09/Yl97QS.png"
      title="联系客服"
      size="large"
      title-style="margin-left: 10px"
      @click="callService"
    />
    <van-cell
      is-link
      icon="https://s1.ax1x.com/2020/05/09/Yl9oz8.png"
      title="使用规则"
      size="large"
      title-style="margin-left: 10px"
      @click="showUseRules"
    />
    <!-- 底部退出登录按钮 -->
    <div class="btn_logout">
      <van-button plain hairline type="info" block @click="logout"
        >退出登录</van-button
      >
    </div>
    <!-- 显示使用规则遮罩层 -->
    <van-overlay :show="useRulesVisible" @click="useRulesVisible = false">
      <div class="wrapper">
        <div class="block">
          <van-cell
            value="1、点餐：用户进入到首页后，可点击开始点餐进行食物得我选购，然后点击下方的提交订单按钮，即可完成点餐；"
          />

          <van-cell
            value="2、取消订单：若您发现选购的食物与预期所要不符，可主动点击取消订单按钮；"
          />
          <van-cell
            value="3、催单：若点餐后发现过了很久，食物都还没送达座位，即可点击催单按钮，主动联系我们的客服；"
          />
          <van-cell
            value="4、评论：在我的订单页面， 选择所要评论的订单评论。"
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      useRulesVisible: false,
      userPhone: '',
      userName: ''
    };
  },
  created() {
    // 加载页面时设置底部导航栏激活状态
    this.$store.commit("setBottomNavActive", 3);
    let {userName, userPhone} = JSON.parse(window.localStorage.getItem("user"))
    this.userName = userName
    this.userPhone = userPhone
  },
  methods: {
    //退出登录
    logout() {
      //todo 清除本地存储
      localStorage.removeItem('user');
      this.$router.push("login");
    },
    //点击显示使用规则
    showUseRules() {
      this.useRulesVisible = true;
    },
    //点击联系客服
    callService() {
      Dialog.confirm({
        title: "联系客服",
        message: "您确定要拨打客服热线158****9548吗？"
      })
        .then(() => {})
        .catch(() => {});
    },
    //跳转去修改收货地址
    toAddressList() {
      this.$router.push("address/list");
    },
    toClollect() {
      Dialog({ message: '功能尚在开发中' });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  padding-top: 30px;
}
.title {
  padding-left: 8px;
  div {
    font-size: 17px;
  }
  .name {
    font-size: 20px;
    padding-bottom: 5px;
    font-weight: 400;
  }
  .word {
    color: #bbb;
    font-size: 15px;
  }
}
.btn_logout {
  width: 150px;
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translate(-50%);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 10px;
}

.block {
  width: 350px;
  height: 280px;
  background-color: #fff;
  border-radius: 10px;
}
</style>
